<template>
  <div class="list_recommond">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <div class="special-offer-inner special-offer-slider">
          <!--single Product -->
          <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide v-for="(good, index) in list_recommond" :key="index">
              <div class="single-product">
                <div class="special-offer-product bg-white m-25 p-25 b1 br-5">
                  <div class="off">10%<span>off</span></div>
                  <div class="product-img-wrap">
                    <img :src="$fullUrl(good.img)" alt="img" />
                  </div>
                  <div class="product-content">
                    <div class="offer-product-price">
                      <span class="discounted-price">￥{{ good.price }}</span>
                      <span class="actual-price has-discount"
                        >￥{{ good.price_ago }}</span
                      >
                    </div>
                    <p class="title">{{ good.title }}</p>
                  </div>
                  <div class="product-action">
                    <div class="btn_buy" @click="onGood(good)">立即购买</div>
                  </div>
                </div>
              </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
				sliding: undefined,
				swiperOption: {
					slidesPerView: 4,
					spaceBetween: 0,
					navigation: {
						nextEl: ".swiper-button-next",
						prevEl: ".swiper-button-prev",
					},
					// Some Swiper option/callback...
				}
    }
  },
  props:{
    list_recommond:{
      type:Array,
      default(){
        return []
      }
    }
  },
  methods: {
			onGood(_item) {
				this.$router.push(`/goods/details?goods_id=${_item.goods_id}`);
			},

  },
  components: {

  }
}
</script>

<style scoped>
	.page_index>div>.row {
		margin-bottom: 1rem;
	}

	#banner {
		padding: 3rem;
		background: url("/img/bg_banner.jfif") center center no-repeat;
	}
  .btn_buy{
    color: #fff;
    background: #3DCA79;
    border-radius: 5px;
    padding: 1px 10px;
    margin: 0 auto;
  }
</style>
